<script setup>
import TzImage from '~/components/tz-image.vue'
</script>

<template>
  <div class="card">
    <div class="img-container">
      <!-- <div class="img" /> -->
      <TzImage class="w-full h-[312px] " :hover="true" src="https://img1.baidu.com/it/u=2805604174,586521884&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689872400&t=62f16abbec2b6b5bfd696012c505698a" />
      <div class="description card">
        <span class="title line1">
          我是一个小皮匠，啦啦啦啦啦啦啦啦啦啦啦
        </span>
      </div>
    </div>
  </div>
</template>

<style  scoped>
/* From uiverse.io by @FrM-bot */
.card {
  height: min-content;
  transition: all .3s;
  position: relative;
  border-radius: 10px 25px;
  box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.5);
}

.card:hover {
  transform: scale(1.03);
}

.img {
  transition: all .3s;
  background: #7555c9;
  /* background: #ff0084; */
  /* background: -webkit-linear-gradient(to right, #33001b, #ff0084); */
  /* background: linear-gradient(to right, #33001b, #ff0084); */
  width: 100%;
}

.img:hover {
  transform: scale(1.3);
}

.img-container {
  display: grid;
  border-radius: 10px 25px;
  height: 270px;
  overflow: hidden;
}

.description {
  position: absolute;
  bottom: 15px;
  left: 0;
  text-align: start;
  padding: 15px;
  width: 85%;
  transition: all 0.5s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px 35px;
}

.description:hover {
  transform: perspective(100px) translateX(7px) rotateX(3deg) rotateY(3deg) scale(1);
  box-shadow: none;
}

.title {
  color: aliceblue;
}
</style>
